<template>
  <div id="region" />
</template>

<script>
import chinaMap from '@/assets/json/china.json'

export default {
  name: 'Region',
  mounted() {
    this.$echarts.registerMap('china', { geoJSON: chinaMap })
    this.drawChart()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const myChart = this.$echarts.init(document.getElementById('region'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '校园人员区域分布',
          left: 200,
          top: 40
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} 个'
        },
        dataRange: {
          min: 0,
          max: 55000,
          text: ['高', '低'], // 文本，默认为数值文本
          splitNumber: 0
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          x: 'right',
          y: 'center'
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            mapLocation: {
              x: 'left'
            },
            selectedMode: 'multiple',
            itemStyle: {
              normal: { label: { show: true }},
              emphasis: { label: { show: true }}
            },
            data: [
              { name: '西藏自治区', value: 605.83 },
              { name: '青海省', value: 1670.44 },
              { name: '宁夏回族自治区', value: 2102.21 },
              { name: '海南省', value: 2522.66 },
              { name: '甘肃省', value: 5020.37 },
              { name: '贵州省', value: 5701.84 },
              { name: '新疆维吾尔自治区', value: 6610.05 },
              { name: '云南省', value: 8893.12 },
              { name: '重庆市', value: 10011.37 },
              { name: '吉林省', value: 10568.83 },
              { name: '山西省', value: 11237.55 },
              { name: '天津市', value: 11307.28 },
              { name: '江西省', value: 11702.82 },
              { name: '广西壮族自治区', value: 11720.87 },
              { name: '陕西省', value: 12512.3 },
              { name: '黑龙江省', value: 12582 },
              { name: '内蒙古自治区', value: 14359.88 },
              { name: '安徽省', value: 15300.65 },
              { name: '北京市', value: 16251.93 },
              { name: '福建省', value: 17560.18 },
              { name: '上海', value: 19195.69 },
              { name: '湖北省', value: 19632.26 },
              { name: '湖南省', value: 19669.56 },
              { name: '四川省', value: 21026.68 },
              { name: '辽宁省', value: 22226.7 },
              { name: '河北省', value: 24515.76 },
              { name: '河南省', value: 26931.03 },
              { name: '浙江省', value: 32318.85 },
              { name: '山东省', value: 45361.85 },
              { name: '江苏省', value: 49110.27 },
              { name: '广东省', value: 53210.28 }
            ]
          }
        ],
        animation: false
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
